import {message,Tabs,Tooltip} from 'antd'
import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { employeesList,updateEmployeesInfo } from '../service'
import moment from 'moment';
import { Link } from 'umi'
import CreateForm from './components/CreateForm'
import HiredateDetails from './components/HiredateDetails'

const  { TabPane } = Tabs;

const TableList = (props) => {
  const actionRef = useRef()
  const actionRef2 = useRef()
  const [done, setDone] = useState(false)
  const [visible, setVisible] = useState(false)
  const [current, setCurrent] = useState(undefined)
  const [tabIndex, setTabIndex] = useState("0")
  const [loading, setLoading] = useState(false)
  const [show, setShow] = useState(false)
  const [oid,setOid] = useState()
  const columns = [
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '公司名称',
      dataIndex: 'orgname',
    },
    {
      title: '部门名称',
      dataIndex: 'unitname',
    },
    {
      title: '岗位名称',
      dataIndex: 'jobname',
    },
    {
      title: '是否复职',
      dataIndex: 'isReinstate',
      valueEnum: {
        0: { text: '否' },
        1: { text: '是' },
        3: { text: '是' },
      },
      hideInSearch: true
    },
    {
      title: '入职日期',
      dataIndex: 'hiredate',
      hideInSearch: true,
      onCell: (record)=>{
        if(record.updateEntryStatus === 1){
          return {
            onClick: event => {
              setShow(true)
              setOid(record.oid)
            },
            style:{
              color:'red',
              maxWidth:100,
              overflow:'hidden',
              whiteSpace:'nowrap',
              textOverflow:'ellipsis',
              cursor:'pointer',
            }
          }
        }
      },
      render: (text,record) => {
        let date = text ? moment(text).format('YYYY-MM-DD') : ''
        if(record.updateEntryStatus === 1){
          return <Tooltip placement="topLeft" title={record.updateEntryStr}>{date}</Tooltip>
        }
        return date
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          {moment().isAfter(record.hiredate) && <> <a onClick={() => employ(record)}>确认入职</a></>}
        </>
      )},
  ]
  const alreadyColumns = [
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '公司名称',
      dataIndex: 'orgname',
    },
    {
      title: '部门名称',
      dataIndex: 'unitname',
    },
    {
      title: '岗位名称',
      dataIndex: 'jobname',
    },
    {
      title: '是否复职',
      dataIndex: 'isReinstate',
      valueEnum: {
        0: { text: '否' },
        1: { text: '是' },
        3: { text: '是' },
      },
      hideInSearch: true
    },
    {
      title: '入职日期',
      dataIndex: 'hiredate',
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
      hideInSearch: true,
    },
  ];

  const handleCancel = () => {
    setCurrent(null);
    setVisible(false);
    setShow(false);
    setOid(null);
    actionRef.current.reload();
  };

  const employ = (item) => {
    setCurrent(item);
    setVisible(true);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    updateEmployeesInfo(values).then((res)=>{
      if(res.flag){
        setDone(false)
        setCurrent(null)
        setVisible(false)
        message.success('入职信息保存成功！');
        actionRef.current.reload()
      }else{
        message.error(res.error);
      }
      setLoading(false);
    })
  };

  const handleChangTabIndex = (key) => {
    setTabIndex(key)
    if(key === '0'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  }

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={handleChangTabIndex}>
        <TabPane tab="待办理" key="0">
          <ProTable
            actionRef={actionRef}
            rowKey="oid"
            request={(params) => employeesList(params,tabIndex)}
            columns={columns}
          />
          <CreateForm
            values={{}}
            done={done}
            current={current}
            visible={visible}
            loading={loading}
            onCancel={handleCancel}
            onSubmit={handleSubmit}
          />
          <HiredateDetails
            visible={show}
            onCancel={handleCancel}
            oid={oid}
          />
        </TabPane>
        <TabPane tab="已办理" key="1">
          <ProTable
            actionRef={actionRef2}
            rowKey="oid"
            request={(params) => employeesList(params,tabIndex)}
            columns={alreadyColumns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
}

export default TableList
